<template>
	<!-- pages/address_edit/address_edit.wxml -->
	<view class="main-content">
		<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :show-location="true" :enable-scroll="false" :enable-zoom="false"></map>
		<view class="address-edit">
			<u-form ref="uForm" class="bg-white">
				<u-form-item :label-width="160" label-align="center" label="地址">
					<view v-if="isSelectedSite == true" @click="selectAddress" class="selected-site-inforamtion">
						<text class="nr" v-text="addressObj.title"></text>
						<text class="xs" v-text="addressObj.address"></text>
					</view>
					<view v-else @click="selectAddress">
						<view class="hint">请选择收货地址</view>
					</view>
				</u-form-item>
				<u-form-item :label-width="160" label-align="center" label="门牌号">
					<u-input placeholder="填写详细地址,例:1层101" v-model="addressObj.house_number" />
				</u-form-item>
			</u-form>
			
			<u-form ref="uForm" class="bg-white">
				<u-form-item :label-width="160" label-align="center" label="联系人">
					<u-input placeholder="收货人姓名" v-model="addressObj.contact" />
					<u-radio-group v-model="addressObj.sex">
						<u-radio name="0">
							先生
						</u-radio>
						<u-radio name="1">
							女士
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item :label-width="160" label-align="center" label="手机号">
					<u-input placeholder="收货人手机号码" v-model="addressObj.telephone" />
				</u-form-item>
				
				<u-button type="primary" class="save-button" @click="formSubmit">保存</u-button>
			</u-form>
			
		</view>
	</view>
</template>

<script>
	import {
		editAddress,
		getOneAddress,
		hasRegionCode,
		addAddress
	} from '@/api/user';
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				isSelectedSite:false,
				addressObj: {
					sex: '',
					contact: '',
					telephone: '',
					province: '',
					city: '',
					district: '',
					title: '',
					address: '',
					house_number: '',
					longitude: '',
					latitude: ''
				},
				region: '',
				addressId: '',
				showRegion: false,
				lists: []
			};
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			var _this = this;
			this.addressId = parseInt(options.id)
			
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			uni.removeStorageSync('wxAddress');
		},
		onShow() {
			var _this = this;
			var now_selected_site_information = uni.getStorageSync('now_selected_site_information');
			if(now_selected_site_information){
				now_selected_site_information = JSON.parse(now_selected_site_information);
				_this.addressObj.province = now_selected_site_information.ad_info.province;
				_this.addressObj.city = now_selected_site_information.ad_info.city;
				_this.addressObj.district = now_selected_site_information.ad_info.district;
				_this.addressObj.title = now_selected_site_information.title;
				_this.addressObj.address = now_selected_site_information.address;
				_this.addressObj.longitude = now_selected_site_information.location.lng;
				_this.addressObj.latitude = now_selected_site_information.location.lat;
				_this.isSelectedSite = true;
			}
			
			if (_this.addressId) {
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
				_this.getOneAddressFun();
			} else {
				uni.setNavigationBarTitle({
					title: '添加地址'
				});
				uni.removeStorageSync('now_selected_site_information');
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						_this.latitude =  res.latitude;
						_this.longitude =  res.longitude;
					}
				});
				_this.getWxAddressFun();
			}
		},
		methods: {
			formSubmit() {
				let {
					value
				} = this.addressObj;
				if (!this.addressObj.contact) return this.$toast({
					title: '请填写收货人姓名'
				});
				if (!this.addressObj.telephone) return this.$toast({
					title: '请填写手机号码'
				});
				if (!this.addressObj.address) return this.$toast({
					title: '请选择地址'
				});
				if (!this.addressObj.house_number) return this.$toast({
					title: '请填写小区、街道、门牌号等信息'
				});
				if(this.addressId){
					this.addressObj.id = this.addressId;
				}

				if (this.addressId) {
					editAddress(this.addressObj).then(res => {
						if (res.code == 1) {
							this.$toast({
								title: res.msg
							}, {
								tab: 3,
								url: 1
							});
						}
					}).catch(err => {
						return this.$toast({
							title: err
						});
					});
				} else {
					addAddress(this.addressObj).then(res => {
						if (res.code == 1) {
							this.$toast({
								title: res.msg
							}, {
								tab: 3,
								url: 1
							});
						}
					}).catch(err => {
						return this.$toast({
							title: err
						});
					});
				}
			},

			getOneAddressFun() {
				getOneAddress(this.addressId).then(res => {
					if (res.code == 1) {
						this.isSelectedSite = true;
						this.addressObj = res.data;
						this.latitude =  res.data.latitude;
						this.longitude =  res.data.longitude;
					}
				});
			},

			getWxAddressFun() {
				let wxAddress = uni.getStorageSync('wxAddress');
				if (!wxAddress) return;
				wxAddress = JSON.parse(wxAddress)
				let {
					userName: contact,
					telNumber: telephone,
					provinceName: province,
					cityName: city,
					detailInfo: address
				} = wxAddress;
				let district = wxAddress.countryName || wxAddress.countyName
				hasRegionCode({
					province,
					city,
					district
				}).then(res => {
					if (res.code == 1) {
						if (res.data.province) {
							this.region = `${province} ${city} ${district}`;
							this.addressObj.contact = contact;
							this.addressObj.telephone = telephone
							this.addressObj.address = address
							this.addressObj.province_id = res.data.province;
							this.addressObj.city_id = res.data.city;
							this.addressObj.district_id = res.data.district;
						}
					}
				});
			},
			
			selectAddress(){
				var _this = this;
				uni.navigateTo({
				    url: '/pages/map/map?latitude=' + _this.latitude + '&longitude=' + _this.longitude
				});
			}
		}
	};
</script>
<style lang="scss">
	uni-page-body,.main-content{
		height: 100%;
	}

	.address-edit {
		margin-top: -100rpx;
		z-index: 1;
		position: relative;
		width: 96%;
		left: 2%;
		border-radius: 10rpx;
		overflow: hidden;
		height: calc(100% - 160px);
		margin-bottom: 10px;
		background-color: #fff;
		padding-top: 10rpx;
		
		.u-form{
			
			&:last-child{
				border-top: 5px solid #f6f6f6;
			}
			.u-form-item{
				padding: 5px 0;
				
				.selected-site-inforamtion{
					display: flex;
					flex-direction: column;
					
					text{
						display: block;
						&:first-child{
							line-height: 28rpx;
						}
						
						&:last-child{
							color: rgb(192, 196, 204);
							padding-top: 10rpx;
							line-height: 24rpx;
						}
					}
				}
				
				.hint{
					color: rgb(192, 196, 204);
				}
			}
		}
		
		
		.save-button{
			width: 90%;
			margin: 60rpx auto;
			background-color: #4e87fc;
			border-radius: 100rpx;
		}
	}

</style>
